<template>
	<view class="px-10 py-10  pb-200 ">
		<uImage v-model="form.hair_url" title="上传人物图片"></uImage>
		
		
		<view class=" grid-columns-4 gap-6 py-10 text-center px-4 bg-white round-8">
		    <view class=" round-4" 
		        v-for="(item, index) in hairstyle" :key="index"
		         @tap="form.hair_type = item.type">
		        <image mode="widthFix" :src="baseUrl + item.image"  class="w-p-100 round-4 " :class="{ 'active': item.type === form.hair_type }"/>
				<text class="fs-12">{{item.name}}</text>
		    </view>
		</view>
		
		<y-footer @success="submit" mode>{{sbumitText}}</y-footer>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import uImage from './modules/uImage.vue';
	import { getAppDetail, util } from '@/api/app.js'
	import { $page, $tool } from '@/utils';
	import baseUrl from '@/utils/system.js'
	
	
	const hairstyle = [
			{ name: '刘海', type: 101, tips: '' ,image:'/image/hairstyle/101.png'},
			{ name: '长发', type: 201, tips: '',image:'/image/hairstyle/201.png' },
			{ name: '刘海加长发', type: 301, tips: '',image:'/image/hairstyle/301.png' },
			{ name: '中程度增发', type: 401, tips: '',image:'/image/hairstyle/401.png' },
			{ name: '轻程度增发', type: 402, tips: '' ,image:'/image/hairstyle/402.png'},
			{ name: '重程度增发', type: 403, tips: '',image:'/image/hairstyle/403.png' },
			{ name: '轻程度卷发', type: 502, tips: '' ,image:'/image/hairstyle/502.png'},
			{ name: '重程度卷发', type: 503, tips: '',image:'/image/hairstyle/503.png' },
			{ name: '短发', type: 603, tips: '要求输入尺寸<2048x2048，若输入大于2048x2048的图片，输出的图片会被resize成最长边2048；' ,image:'/image/hairstyle/603.png'},
			{ name: '金发', type: 801, tips: '' ,image:'/image/hairstyle/801.png'},
			{ name: '直发', type: 901, tips: '',image:'/image/hairstyle/901.png' },
			{ name: '头发去油', type: 1001, tips: '轻微效果，原图中此问题建议较为明显' ,image:'/image/hairstyle/1001.png'},
			{ name: '补发际线', type: 1101, tips: '调整过高的发际线，轻微效果，原图中此问题建议较为明显',image:'/image/hairstyle/1101.png' },
			{ name: '头发柔顺', type: 1201, tips: '轻微效果，原图需有较大发型区域，原图中此问题建议较为明显' ,image:'/image/hairstyle/1201.png'},
			{ name: '补发缝', type: 1301, tips: '轻微效果，填补头发区域中的头皮部分，原图中此问题建议较为明显' ,image:'/image/hairstyle/1301.png'},
		];
	
	const form = ref({
		app_id: 0,
		hair_url: '',
		hair_type: 0
	})
	const detail = ref({
		points: 0
	})
	const sbumitText = computed(() => {
		if (detail.value.points == 0) {
			return '免费生成'
		}
		return '消耗算力:' + detail.value.points
	})
	onLoad((option) => {
		if (option.id) {
			get({ id: option.id })
		} else {
			get({ type: 'hairStyle' })
		}
	})
	const get = (query) => {
		getAppDetail(query).then(res => {
			detail.value = res.data
			form.value.app_id = detail.value.id
		})
	}

	const submit = () => {
		if (!detail.value.id) {
			$tool.toast('应用不存在');
			return;
		}
		uni.showLoading({
			title: '生成中..'
		})
		form.value.app_id = detail.value.id
		util(form.value).then(res => {
			$tool.toast('生成成功');
			$page.open('/pages/app/result?type=hairStyle')
		})
	}
</script>

<style>
.pb-200{
	padding-bottom: 300rpx !important;
}
.active{
	   box-shadow: 0 0 0 2px #000;
}
</style>